<template>
  <ui-popup
    class="ui-dialog"
    ref="popup"
    customClass="dialog-popup"
    :z-index="zIndex"
    :overlay="overlay"
    @close-on-click-overlay="closeOnClickOverlay"
    @close="onClickOverlay"
  >
    <view
      v-if="title"
      class="ui-dialog--header ui-txt txt-heading"
      :class="[message ? '' : 'van-dialog--isolated']"
    >
      <slot v-if="$slots.title" name="title" />
      <block v-else-if="title">{{ title }}</block>
    </view>
    <view class="ui-dialog--content">
      <slot v-if="$slots.default" />
      <view
        v-else-if="message"
        class="van-dialog__message"
        :class="[title ? 'van-dialog__message--has-title' : '' , messageAlign ? 'van-dialog__message--' + messageAlign : '' ]"
      >
        <text class="van-dialog__message-text">{{ message }}</text>
      </view>
    </view>

    <view class="ui-dialog--footer" v-if="showFooterButton">
      <uiButton
        type="primary"
        plain
        class="ui-dialog--footer-cancel"
        custom-class="ui-dialog--footer-cancel"
        @click="onCancel"
      >{{ cancelButtonText }}</uiButton>
      <uiButton
        type="primary"
        class="ui-dialog--footer-confirm"
        custom-class="ui-dialog--footer-confirm"
        @click="onConfirm"
      >{{ confirmButtonText }}</uiButton>
    </view>
  </ui-popup>
</template>

<script>
import uiPopup from "@/components/base/popup/index";
import uiButton from "@/components/base/button/index";
import uiButtonGroup from "@/components/base/button-group/index";
export default {
  name: "uiDialog",
  components: {
    uiPopup,
    uiButtonGroup,
    uiButton
  },
  props: {
    value: Boolean,
    title: String,
    message: String,
    useSlot: Boolean,
    className: String,
    customStyle: String,
    asyncClose: Boolean,
    messageAlign: String,
    overlayStyle: String,
    useTitleSlot: Boolean,
    // 是否显示 footer
    showFooterButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: Boolean,
    closeOnClickOverlay: Boolean,
    confirmButtonOpenType: String,
    width: {
      type: null
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    confirmButtonText: {
      type: String,
      default: "确认"
    },
    cancelButtonText: {
      type: String,
      default: "取消"
    },
    confirmButtonColor: {
      type: String
    },
    cancelButtonColor: {
      type: String
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    overlay: {
      type: Boolean,
      default: true
    },
    transition: {
      type: String,
      default: "scale"
    }
  },
  data() {
    return {};
  },
  "mp-weixin": {
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      styleIsolation: "shared" //  这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.$nextTick(_ => {
          value && this.open();
        });
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    open() {
      this.$refs.popup.open();
    },
    onConfirm() {
      this.handleAction("confirm");
    },

    onCancel() {
      this.handleAction("cancel");
    },

    onClickOverlay() {
      this.onClose("overlay");
    },

    handleAction(action) {
      if (this.asyncClose) {
        // this.setData({
        //   [`loading.${action}`]: true
        // });
      }

      this.onClose(action);
    },

    close() {
      this.$emit("input", false);
      this.$refs.popup.close();
    },

    stopLoading() {
      this.setData({
        loading: {
          confirm: false,
          cancel: false
        }
      });
    },

    onClose(action) {
      if (!this.asyncClose) {
        this.close();
      }
      this.$emit("close", action);

      // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
      this.$emit(action, { dialog: this });

      // const callback = this[action === "confirm" ? "onConfirm" : "onCancel"];

      // if (callback) {
      //   callback(this);
      // }
    }
  }
};
</script>

<style scoped lang="scss">
.ui-dialog {
  .ui-dialog--header {
    text-align: center;
    padding: 16rpx 30rpx;
    box-sizing: border-box;
  }
  .ui-dialog--content {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
  }
  >>> .dialog-popup {
    padding: 0 !important;

    .ui-dialog--footer-cancel,
    .ui-dialog--footer-confirm {
      flex: 1;
      margin-left: 0;
      height: 78rpx;
      &::after {
        border-color: $border-color-base !important;
      }
    }
    .ui-dialog--footer-cancel {
      &::after {
        border-bottom-left-radius: 20rpx;
      }
    }
    .ui-dialog--footer-confirm {
      &::after {
        border-bottom-right-radius: 20rpx;
      }
    }
  }
  .ui-dialog--footer {
    display: flex;
    flex-direction: row;
  }
}
</style>
